<template>
	<!-- 催收列表 -->
	<div class="collectlist" v-loading="loading">
		<h3>催收列表</h3>
		<AreaWarp :padding="true">
	        <SearchWarp :label="'姓名'">
	        	<el-input v-model.trim="searchInfo.realName"    placeholder="请输入用户姓名"></el-input>
	        </SearchWarp>
	        <SearchWarp :label="'手机号'">
	          <el-input v-model.trim="searchInfo.mobile" maxlength="11" placeholder="请输入手机号码"></el-input>
	        </SearchWarp>
	        <SearchWarp :label="'逾期天数'">
	          <el-input class="inputWidth" v-model.trim="searchInfo.overDaysStart"  placeholder="开始天数"></el-input>
	          -
	          <el-input class="inputWidth" v-model.trim="searchInfo.overDaysEnd"  placeholder="结束天数"></el-input>
	        </SearchWarp>
	        <SearchWarp :label="'入催时间'">
	          	<el-date-picker v-model="searchInfo.entryTime" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期"
	                          end-placeholder="结束日期" :editable="false"></el-date-picker>
	        </SearchWarp>
	        <!-- <SearchWarp :label="'分配时间'" >
	          	<el-date-picker disabled  type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期"
	                          end-placeholder="结束日期" :editable="true"></el-date-picker>
	        </SearchWarp> -->
	        <SearchWarp :label="'上次催收时间'">
	          	<el-date-picker v-model="searchInfo.lastEntryTime" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期"
	                          end-placeholder="结束日期" :editable="false"></el-date-picker>
	        </SearchWarp>
	        <SearchWarp :label="'上次催收状态'">
		        <el-select v-model="searchInfo.status"  placeholder="请选择">
		          <el-option v-for="item in statusOptions"
		                     :key="item.value"
		                     :label="item.label"
		                     :value="item.value">
		          </el-option>
		        </el-select>
		    </SearchWarp>
	        <BtnWarp>
	          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
	          <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
	        </BtnWarp>
	     </AreaWarp>

	   	<AreaTitleWarp :title="'订单列表'">

      	</AreaTitleWarp>

      <!--搜索结果区域-->
      <AreaWarp :padding="false">
        <el-table size="mini" :data="tableInfo.collectionList" style="width: 100%" class="pub-table" header-row-class-name="pub-table-header-row" header-cell-class-name="pub-table-header-cell"
          tooltip-effect="dark"
        >

          <el-table-column v-if="checkShow" prop="borrowId" label="案件详情" min-width="90">
          	<template slot-scope="scope">
          		<el-button type="text" size="small" @click="dblclick(scope.row)">查看</el-button>
          	</template>
          </el-table-column>
          <el-table-column prop="appId" label="产品" :formatter="formatter_product"></el-table-column>
          <el-table-column prop="realName" label="姓名"></el-table-column>
          <el-table-column prop="mobile" label="手机号" min-width="100"></el-table-column>
          <el-table-column prop="overdays" label="逾期天数"></el-table-column>
          <el-table-column prop="overMoney" label="逾期金额" min-width="100"></el-table-column>
          <el-table-column prop="repayMoney" label="已还金额" min-width="100"></el-table-column>
          <el-table-column prop="leftMoney" label="剩余应还" min-width="100"></el-table-column>
          <el-table-column prop="entryTime" label="入催时间" min-width="150" :formatter="formatter_time"></el-table-column>
           <el-table-column prop="lastEntryTime" label="上次催收时间" min-width="150" :formatter="formatter_time"></el-table-column>
           <el-table-column prop="status" label="上次催收状态" :formatter="filter_status"></el-table-column>
        </el-table>
        <el-pagination
          layout="total,sizes,prev, pager, next, jumper" class="pub-page"
          :current-page="searchInfo.page"
          :page-sizes="[20,50,100]"
          :page-size="searchInfo.size"
          :total="tableInfo.total"
          @current-change="search"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </AreaWarp>
	</div>
</template>
<script>
import Collection from "../../../assets/js/collection.js";
import { collectionStatus } from "../../../assets/js/collectionStatus";
export default {
  data() {
    return {
      searchInfo: {
        realName: "",
        mobile: "",
        overDaysStart: "",
        overDaysEnd: "",
        entryTime: "",
        lastEntryTime: "",
        status: "",
        size: 20,
        page: 1
      },
      loading: false,
      statusOptions: [
        {
          value: "",
          label: "全部"
        }
      ],
      tableInfo: {
        collectionList: [],
        total: 0
      },
      checkShow:false
    };
  },
  methods: {
    status() {
      let that = this;
      return new Promise(function(resolve, reject) {
        that.ajaxJson({
          url: "/static/finance/resourcelist",
          success: function(res) {
            if (res.code == "0") {
              let data = res.data;
              data.forEach(function(item) {
                that.statusOptions.push({
                  value: item.id,
                  label: item.resource
                });
              });
              resolve();
            }
          }
        });
      });
    },
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;
      let x = {
        that: that,
        realName: that.searchInfo.realName,
        mobile: that.searchInfo.mobile,
        entryTime: that.searchInfo.entryTime,
        lastEntryTime: that.searchInfo.lastEntryTime,
        status: that.searchInfo.status,
        overDaysStart: that.searchInfo.overDaysStart,
        overDaysEnd: that.searchInfo.overDaysEnd,
        size: that.searchInfo.size,
        page: that.searchInfo.page
      };

      let collection = new Collection(x);

      let reqData = collection.getState();
      if (reqData.code) {
        that.showMsg(reqData.message, "error");
        return;
      }
      that.loading = true;
      that.ajaxJson({
        url: "/collection/list",
        data: reqData,
        success: function(res) {
          if (res.code == "0") {
            that.tableInfo = res.data;
          }
          that.loading = false;
        }
      });
    },
    reset() {
      let that = this;
      that.searchInfo = {
        realname: "",
        mobile: "",
        overDaysStart: "",
        overDaysEnd: "",
        entryTime: "",
        lastEntryTime: "",
        status: "",
        size: 20,
        page: 1,
        data: ""
      };
      that.search();
    },
    //查看
    dblclick(row) {
      let that = this;
      that.$emit("addTab", {
        tabOptions:
          "collectionMessage_" +
          row.realName +
          "-" +
          row.borrowId +
          "-案件详情",
        queryMsg: { method: "add", borrowId: row.borrowId, userId: row.userId, realName:row.realName }
      });
    },
    filter_status: collectionStatus,
    isCheckShow() {
      let that = this;
      let isCheckShow = that.urlPermissions().indexOf("/collection/recordlist");
      if (isCheckShow == "-1") {
        that.checkShow = false;
      } else {
        that.checkShow = true;
      }
    }
  },
  created() {
    let that = this;
    Promise.all([that.status(),that.isCheckShow()]).then(arr => {
      that.search();
    });
  },
  beforeCreate() {
    let that = this;
  }
};
</script>
<style lang="less">
.collectlist {
  .inputWidth {
    width: 120px;
  }
}
</style>
